<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="auto" style="border-right: 1px solid #ccc;">
        <!-- 2.使用组件 -->
        <Ln />
      </el-aside>
      <el-container>
        <el-header>
          <!-- <Tr/> -->
          <div class="userTop">
            <ShowExpant></ShowExpant>
            <HeaderTop></HeaderTop>
          </div>
          <BreadCrumb></BreadCrumb>
        </el-header>
        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<script setup lang="ts">
import { useStore } from "vuex";
import Ln from "../../src/components/LeftNav.vue";
import Tr from "../../src/components/TopRight.vue";
import BreadCrumb from "../components/BreadCrumb.vue";
import HeaderTop from "@/components/HeaderTop.vue";

import ShowExpant from "@/components/ShowExpant.vue";

const store = useStore()
</script>
<style lang="scss">
.common-layout {
  .el-aside {
    background-color: #fff;

  }

  .el-header {
    background-color: #fff;
    --el-header-padding: none;
    --el-header-height: 100px;

    .userTop {
      height: 57px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .el-main {
    background-color: #eee;
    // z-index: -1;
  }
}

// 高度100%
.el-aside,
.el-container,
.common-layout,
#app,
body,
html {
  height: 100vh;
}
</style>